<template>
  <view class="container">
    <!-- 顶部登录/注册区域 -->
    <view class="header">
      <view class="user-info">
        <image class="avatar" src="https://picsum.photos/100/100" mode="aspectFill"></image>
        <view class="welcome-text">
          <text class="title">Wu</text>
        </view>
      </view>
    </view>

    <!-- 订单状态快捷入口 -->
    <view class="order-status">
      <navigator url="/pages/order/pay" class="status-item">
        <view class="status-icon">
          <Clock />
        </view>
        <text class="status-text">待付款</text>
      </navigator>
      <navigator url="/pages/order/user" class="status-item">
        <view class="status-icon">
          <AlarmClock />
        </view>
        <text class="status-text">待使用</text>
      </navigator>
      <navigator url="/pages/order/context" class="status-item">
        <view class="status-icon">
          <ChatDotSquare />
        </view>
        <text class="status-text">待评价</text>
      </navigator>
      <navigator url="/pages/me/orderList/orderList" class="status-item">
        <view class="status-icon">
          <Message />
        </view>
        <text class="status-text">我的订单</text>
      </navigator>
    </view>

    <!-- 电子券和优惠券区域 -->
    <view class="coupon-area">
      <view class="coupon-item">
        <view class="count-type-container">
          <view class="coupon-count">0张</view>
          <text class="coupon-type">电子券</text>
        </view>
      </view>
      <view class="coupon-item">
        <view class="count-type-container">
          <view class="coupon-count">0张</view>
          <text class="coupon-type">优惠券</text>
        </view>
      </view>
    </view>

    <!-- 服务与功能区域 -->
    <view class="service-section">
      <text class="section-title">服务与功能</text>
      <view class="service-item-group">
        <view class="service-item">
          <view class="item-content">
            <el-icon><Stamp /></el-icon>
            <text class="item-text">任务中心</text>
            <view class="corner-tag top-right">海量积分</view>
          </view>
        </view>
        <view class="service-item">
          <view class="item-content">
            <el-icon><Share /></el-icon>
            <text class="item-text">邀请好友</text>
            <view class="corner-tag top-right">领积分</view>
          </view>
        </view>
      </view>
      <view class="service-item-group">
		<navigator url="/pages/me/cartList/cartList" class="service-item">
          <view class="item-content">
            <el-icon><GoodsFilled /></el-icon>
            <text class="item-text">购物车</text>
          </view>
       </navigator>
        <view class="service-item">
          <view class="item-content">
            <el-icon><Shop /></el-icon>
            <text class="item-text">我的商城</text>
          </view>
        </view>
      </view>
      <view class="service-item-group">
        <view class="service-item">
          <view class="item-content">
            <el-icon><LocationFilled /></el-icon>
            <text class="item-text">地址管理</text>
          </view>
        </view>
        <view class="service-item">
          <view class="item-content">
            <el-icon><Flag /></el-icon>
            <text class="item-text">给个好评</text>
          </view>
        </view>
      </view>
      <view class="service-item-group">
        <view class="service-item">
          <view class="item-content">
            <el-icon><PhoneFilled /></el-icon>
            <text class="item-text">客服中心</text>
          </view>
        </view>
        <view class="service-item">
          <view class="item-content">
            <el-icon><Avatar /></el-icon>
            <text class="item-text">关于我们</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  Clock,
  ChatDotSquare,
  Message,
  AlarmClock,
  GoodsFilled,
  LocationFilled,
  Flag,
  Shop,
  PhoneFilled,
  Avatar,
  Share,
  Stamp,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.welcome-text {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
}

.order-status {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
}

.status-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.status-text {
  font-size: 24rpx;
  color: #333;
}

.coupon-area {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.coupon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #f2f7ff 0%, #dce7ff 100%);
  padding: 20rpx;
  border-radius: 20rpx;
  width: 48%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.coupon-item:nth-child(2) {
  background: linear-gradient(135deg, #f0f8f5 0%, #d5ede7 100%);
}

.count-type-container {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.coupon-count {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.coupon-type {
  font-size: 24rpx;
  color: #666;
}

.service-section {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.service-item-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
}

.item-content {
  position: relative;
  display: flex;
  flex-direction: column; /* 保持垂直布局 */
  align-items: center;
  padding-top: 10rpx;
}

/* 图标与文字垂直间距调整 */
.el-icon {
  margin-bottom: 8rpx; /* 增加图标底部间距 */
}

.item-text {
  font-size: 24rpx;
  text-align: center;
  color: #333;
}

.corner-tag {
  position: absolute;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  color: white;
  background-color: #ff4500;
}

.top-right {
  top: -20rpx;
  right: -80rpx;
}
</style>